<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>聊天室</title>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
</head>
<script>
    var ws, name, client_list={};
    // 连接服务端
    function connect() {
        // 创建websocket
        ws = new WebSocket("ws://127.0.0.1:86");
        ws.onopen = joinRoom;//加入房间后，可以获取到client_id,以后发言、发红包、发计划都要带client_id，发言等业务都是走接口，下面的发言方法实际上市接收发言而已
        // 当有消息时根据消息类型显示不同信息
        ws.onmessage = onmessage;
        ws.onclose = function() {
            console.log("连接关闭，自动重连");
            connect();
        };

        ws.onerror = function() {
            console.log("出现错误");
        };
    }

    // 服务端发来消息时
    function onmessage(e)
    {
         console.log(e);
        var data = JSON.parse(e.data);
        switch(data['type']){
            // 服务端ping客户端
            case 'ping':
                ws.send('{"type":"pong"}');
                console.log("心跳检测成功".data);
                break;
            // 登录 更新用户列表
            case 'login':
                //{"type":"login","client_id":xxx,"client_name":"xxx","client_list":"[...]","time":"xxx"}
                //client_name用户名字，client_id用户在聊天室的id，是用户的唯一身份
                break;
            // 发言
            case 'gift_money':

            case 'say':
                console.log(data['from_client_name']+"说"+data['content']);
                break;
            // 用户退出 更新用户列表
            case 'logout':
                console.log(e);
                break;
            default :
        }
    }




    // 连接建立时发送登录信息
    function joinRoom()
    {
        // 加入房间，你写业务时候要改写为前端代码，根据用户的选择，传token和room_id房间号
        var login_data = '{"type":"login","room_id":"37","id"=>"310","client_name":"client_3"}';
        console.log("加入房间1"+login_data);
        ws.send(login_data);
    }
    /**
     * 发言
     */
    function say(){
        var login_data = '{"type":"say","room_id":"7","client_name":"client_3_name","content":"demo3"}';
        ws.send(login_data);
    }

</script>
<body>
<button onclick="connect()">连接房间1</button>
<button onclick="say()">发言</button>
<input type="text" id="'textarea">
</body>
</html>